<script setup>
import {ref, reactive, watch} from 'vue'
const count = ref(0)
const user = reactive({
  name: '心满',
  info: {
    gender: '女',
    age: 18
  }
})
// 监听一下count的变化 watch 第一个参数: 被监听的数据 , 第二个参数: 回调函数, 第三个参数: 是配置项
// 1.监听单独数据
// watch(count, () => {
//   console.log("count改变了")
// })
// 2. 监听多个数据
// watch([count, user], () => {
//   console.log('数据变化了')
// } )
// 3. 监听对象属性变化(简单) 这里vue3跟vue2有所区别
// watch(() => user.name, () => {
//   console.log('数据改变了')
// })
// 4. 监听对象属性变化(复杂,对象) 这里vue3跟vue2有所区别
watch(() => user.info, () => {
  console.log('数据改变了')
}, {
  // 开启深度监听
  deep: true,
  // 默认就执行一下
  immediate: true
})

const add = () => {
  count.value++
}
const changeAge = () => {
  user.info.age++
}
const changeName = () => {
  user.name = '超凡蜘蛛侠'
}
const changeGender = () => {
  user.info.gender = '你猜猜'
}
</script>

<template>
  <div class="watch-page">
    计数器: {{count}}
  </div>
  <div>
    user: 姓名: {{user.name}} --- 性别: {{user.info.gender}} --- 芳龄: {{user.info.age}}  
  </div>
  <button @click="add">计数器+1</button>
  <button @click="changeAge">年龄+1</button>
  <button @click="changeName">改名字</button>
  <button @click="changeGender">改性别</button>
</template>

<style scoped></style>
